<template>
  <div class="testOnePage pad-16">
    <h1>page1</h1>

    <h4 class="mt-10">---爷爷组件修改孙子组件数据 响应式---</h4>

    <el-row type="flex" class="mt-10">
      <el-button @click="toSonBtn">
        爷爷组件修改孙子组件 provide修改inject
      </el-button>

      <el-button @click="toRest"> 重置 </el-button>
    </el-row>

    <FatherPage :value="222"></FatherPage>

    <el-button @click="throttleHandler">测试自己封装的节流函数</el-button>

    <el-button @click="debounceHandler">测试自己封装的防抖函数</el-button>

    <h3>测试随机颜色</h3>

    <el-button @click="coloeChang">刷新随机颜色</el-button>

    <div
      class="colorBtn"
      :style="{ background: mathColor[i] }"
      v-for="(item, i) in 5"
      :key="i"
    >
      随机颜色{{ i }}
    </div>
  </div>
</template>

<script>
import { debounceFunc, throttleFunc, randomColorFunc } from '@/utils/func'
import FatherPage from './components/fatherPage'

export default {
  name: 'testOnePage',
  components: {
    FatherPage,
  },
  props: {},
  provide() {
    return {
      // 第一种方法
      objs: () => this.values,
      obj: this.value,
    }
  },
  data() {
    return {
      // 第二种方法
      value: {
        msg: '方法1-修改前',
        num: 0,
      },
      values: {
        msg: '方法2-修改前',
        num: 0,
      },
      num: 0,
      nums: 0,
      mathColor: [],
    }
  },
  computed: {
    loader() {
      // return () => import(`./demo`)
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.coloeChang()
  },
  methods: {
    toSonBtn() {
      this.value.msg = '方法1-修改后'
      this.value.num++

      this.values.msg = '方法2-修改后'
      this.values.num++
    },

    toRest() {
      this.value.msg = '方法1-修改前'
      this.value.num = 0

      this.values.msg = '方法2-修改前'
      this.values.num = 0
    },

    throttleHandler: throttleFunc(function (e) {
      this.num++
      console.log('节流btn', this.num)
    }, 1000),

    debounceHandler: debounceFunc(function (e) {
      this.nums++
      console.log('防抖btn', this.nums)
    }, 2000),

    coloeChang() {
      this.mathColor = []
      const data = [{}, {}, {}, {}, {}]

      for (var i = 0; i < 6; i++) {
        this.mathColor.push(randomColorFunc())
      }
      console.log('mathColor', this.mathColor)
    },
  },
}
</script>

<style scoped lang="scss">
.testOnePage {
  height: 100%;
  .colorBtn {
    margin-bottom: 5px;
    width: 250px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
}
</style>
